$(function () {
    var flag = true;
    $(".layer").click(function () {
        flag=false;
        let $index = $(this).index();
        let scrollTop = $(".section").eq($index).offset().top;
        $("html,body").animate({
            scrollTop

        }, function () {
            flag = true;
        });
        $(this).addClass("layer_select").siblings().removeClass("layer_select");
    })
    $(document).scroll(function () {
        if (flag == true) {
            // 获取不可见区域的高度
            let scrollTop = $(this).scrollTop();
            // 获取到所有secion+自身高度的数组
            let sectionList = Array.from($(".section")).map(item => $(item).offset().top + $(item).height());
            //3.所有section+自身高度的值是否 大于 不可见区域的值  ,就获取对应的下标
            let index = sectionList.findIndex(item => item > scrollTop);
            // 通过下标,给 li设置样式
            $(".layer").eq(index).addClass("layer_select").siblings().removeClass("layer_select")    
        }
    })
})